/**
 * 
 *  webpack基础的配置
 * 
 * 
 * **/
// 导入path模块（nodejs环境下内置的）
const path = require("path");
// 导入处理html模板的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 导入提取css文档的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 配置选项
const option = {
    // 配置程序的入口
    entry: {
        "index": "./src/index.js",
        "indexhtml": "./src/index.html",
        "indexless": "./src/index.less",

        "about": "./src/javascripts/about.js",
        "login": "./src/javascripts/login.js",
    },
    // 生成source-map文件 （记录原始代码  用于调试、错误报告、性能优化）
    devtool: "source-map",
    // 输出配置
    output: {
        // __dirname： 是nodejs环境绝对路径变量: D:\H5\project
        path: path.join(__dirname, 'dist'),
        // 输出的文件名称
        filename: "./js/[name]-bundle-[fullhash:8].js",
        // 自动清除冗余文件
        clean: true,
        // publicPath:'./'
    },
    // 配置loader(加载器) 解析非JS文件
    module: {
        rules: [
            // 处理图片
            {
                test: /\.(png|jpe?g|gif)$/i,
                // 打包时排除 node_modules 目录下的文件 （这个目录下的文件不需要打包）
                exclude: /node_modules/,
                type: 'javascript/auto',
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 超出8KB,就不转换成base64格式
                            // 限制  小于等于8KB的图片，做成base64格式
                            // 8192/1024 = 8KB
                            limit: 8192,
                            // 禁用严格模式
                            esModule: false,
                            // 设置输出的文件路径
                            // outputPath: 'images',
                            name: './images/[name]_[hash].[ext]',
                        },
                    },
                ],

            },
            // 处理样式
            //  此处提取了css代码（做css源代码分离）
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    "css-loader",
                ],
            },
            // 处理less
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    "css-loader",
                    "less-loader",
                ],
            },
            // 处理sass （.sass | .scss）
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                        },
                    },
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            },
            // 处理html模板中的图片
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    // 禁用严格模式
                    esModule: false,
                },
            },

            // 处理ejs模板
            // {
            //     test: /\.ejs$/,
            //     loader: 'ejs-loader',
            //     options: {
            //         variable: 'data',
            //         interpolate: '\\{\\{(.+?)\\}\\}',
            //         evaluate: '\\[\\[(.+?)\\]\\]'
            //     }
            // },
            // 把ES6/7/8++ 转ES5
            // {
            //     test: /\.(?:js|mjs|cjs)$/,
            //     exclude: /node_modules/,
            //     use: {
            //         loader: 'babel-loader',
            //         options: {
            //             targets: "defaults",
            //             presets: [
            //                 ['@babel/preset-env']
            //             ]
            //         }
            //     }
            // },

            // 把ES6语法转ES5
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ],
    },
    // 配置插件
    plugins: [
        // 处理html模板的插件
        new HtmlWebpackPlugin({
            title: "主页",
            // 模板路径
            template: './src/index.html',
            // 输出的路径
            filename: './index.html',
            // 插入脚本的位置
            inject: "head",
            // 插入哪些脚本文件 对应选项“entry”的key
            chunks: ['index'],
            cache: true,
        }),

        // 处理html模板的插件
        new HtmlWebpackPlugin({
            title: "关于",
            // 模板路径
            template: './src/pages/about.html',
            // 输出的路径
            filename: './about.html',
            // 插入脚本的位置
            inject: "head",
            // 插入哪些脚本文件 对应选项“entry”的key
            chunks: ['about'],
            cache: true,
        }),

         // 处理html模板的插件
         new HtmlWebpackPlugin({
            title: "关于",
            // 模板路径
            template: './src/pages/login.html',
            // 输出的路径
            filename: './login.html',
            // 插入脚本的位置
            inject: "head",
            // 插入哪些脚本文件 对应选项“entry”的key
            chunks: ['login'],
            cache: true,
        }),

        // 提取css
        new MiniCssExtractPlugin({
            filename: "./css/[name].css",
            chunkFilename: "./css/[id].css"
        }),
        // new webpack.HotModuleReplacementPlugin()
    ],
    // 优化项目
    //警告 webpack 的性能提示
    performance: {
        hints: 'warning',
        //入口起点的最大体积
        maxEntrypointSize: 50000000,
        //生成文件的最大体积
        maxAssetSize: 30000000,
        //只给出 js 文件的性能提示
        assetFilter: function (assetFilename) {
            return assetFilename.endsWith('.js');
        }
    },
}
// 在模块系统对象下进行配置
module.exports = option;